<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>元素显示模式</title>
    <style>
      h1 {
        /* 注意: 如果没有设置宽度,则默认100% */
        /* width: 400px; */
        height: 400px;
      }

      div {
        width: 300px;
        height: 500px;
        background-color: pink;
      }

      span {
        /* width: 200px;
        height: 200px; */
        font-size: 50px;
        background-color: blueviolet;
      }

      img {
        width: 800px;
      }
    </style>
  </head>
  <body>
    <!-- 
      种类1: 块元素
      代表: <h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中 <div> 标签是最典型的块元素

      特点: 
      1.默认情况下独占一行
      2.默认情况下如果不设置宽度,则宽度是100%(高度是0),即占满整个父级容器,如果没有父级容器,则占满整个屏幕
      3.可以通过width和height来控制元素的宽度和高度
      4.可以通过margin和padding控制外边距和内边距

      作用: 当做容器存在,用来盛放其他元素

      注意: 
      有些文字类型的块元素(h1~h6,p...)不建议当做容器,即内部不要再添加块元素
      块元素默认上下排布,元素和元素之间是紧贴的(没有间隔)
     -->
    <div>
      <h1>标题文字</h1>
    </div>

    <h1>标题文字</h1>

    <hr />

    <!-- 
      种类2: 行内元素 
      代表:  <a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中<span> 标签是最典型的行内元素
      
      特点: 
      1.默认情况下一行显示
      2.不能通过width和height来控制元素的宽度和高度,书写后无效
      3.行内元素的大小是根据内容大小来决定的
      
      作用: 行内元素是用来盛放文本或者其他行内元素的容器

      注意: 行内元素在一行上显示,元素和元素之间有一个间隔(不是紧挨着的)
    -->
    <span>span</span>
    <span>span</span>

    <hr />

    <!-- 
      种类3: 行内块元素
      代表: <img />、<input />、<td>...

      特点:
      1.一行显示
      2.可以设置宽,高,内外边距
      3.默认情况下,行内块元素的大小是由内容决定的
     -->
    <img src="img/product.jpg" alt="" />
    <img src="img/product.jpg" alt="" />
  </body>
</html>
